<template>
    <el-card class="custom-card">
        <!-- 头部区域 -->
        <div class="custom-header">
            <div class="custom-title">{{ collectData.classify }}</div>
            <div class="status-container">
                <span class="status-tag">{{ collectData.message }}</span>
            </div>
        </div>
        <!-- 内容区域 - 添加执行时间 -->
        <div class="custom-content">
            <div class="content-item">
                <!-- 添加title属性绑定到collectData.url，实现鼠标悬停显示完整地址 -->
                <span class="item-label" :title="collectData.url">{{ collectData.url }}</span>
            </div>
            <div class="content-item">
                <span class="time-style">执行时间：{{ collectData.start_time }}</span>
            </div>
        </div>
    </el-card>
</template>

<script>
import {getCollectDetailList} from '@/api/user'
export default {
    name: 'SatelliteParams',
    data() {
        return {
            querTestId: '',
            isLoaded: false,
            collectData: {}
        }
    },

    mounted() {
        this.querTestId = this.$route.query.taskID
        console.log('Task ID:', this.querTestId)
        this.isLoaded = true
        if (this.querTestId) {
            this.queryCollectData()
        }
    },
   
    methods: {
        queryCollectData() {
            getCollectDetailList({
                taskID: this.querTestId
            }).then(response => {
                console.log('请求的数据:', response)
                this.collectData = response.rows

                this.isLoaded = true
            }).catch(error => {
                console.log('请求错误:', error)
                this.isLoaded = true
            })
        }
    }
}
</script>

<style scoped>
/* 卡片容器优化 */
.custom-card {
    border-radius: 8px;
    border: 1px solid #EBEEF5;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 1200px;
    margin: 24px auto;
    overflow: visible;
    transition: box-shadow 0.3s ease;
}

/* 卡片悬停效果 */
.custom-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* 头部区域优化 */
.custom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EBEEF5;
    background-color: #FAFAFA;
}

/* 标题样式优化 */
.custom-title {
    font-size: 20px;
    font-weight: 600;
    color: #303133;
    margin: 0;
}

/* 状态容器优化 */
.status-container {
    display: flex;
    align-items: center;
}

/* 状态标签样式优化 */
.status-tag {
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 16px;
    transition: all 0.3s ease;
}

/* 内容区域优化 - 实现上下对齐 */
.custom-content {
    padding: 24px;
    display: flex;
    align-content: center;
    justify-content: space-between;
    gap: 16px; /* 控制内容项之间的垂直间距 */
    background-color: #ffffff;
}

/* 内容项容器 - 确保垂直对齐 */
.content-item {
    display: flex;
    align-items: center;
    min-height: 36px; /* 设置最小高度确保对齐一致 */
}

/* 标签样式优化 - 添加省略号和悬停效果 */
.item-label {
    color: #303133;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    /* 添加以下属性实现文本省略和悬停效果 */
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 显示省略号 */
    max-width: 500px; /* 设置最大宽度限制，可根据需要调整 */
    cursor: help; /* 鼠标悬停时显示帮助指针 */
}

/* 执行时间样式 - 移到内容区域 */
.time-style {
    color: #606266;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .custom-card {
        margin: 16px;
        border-radius: 6px;
    }
    
    .custom-header {
        padding: 16px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .status-container {
        align-self: flex-start;
    }
    
    .custom-title {
        font-size: 18px;
    }
    
    .custom-content {
        padding: 16px;
        gap: 12px;
    }
    
    .item-label,
    .time-style {
        font-size: 14px;
    }
    
    .content-item {
        min-height: 32px;
    }
    /* 响应式设计中也需要调整item-label的最大宽度 */
    .item-label {
        max-width: 300px; /* 在平板设备上适当减小最大宽度 */
    }
}

@media (max-width: 480px) {
    .custom-card {
        margin: 8px;
    }
    
    .custom-content {
        padding: 12px;
    }
    .item-label {
        max-width: 200px; /* 在手机设备上进一步减小最大宽度 */
    }
}
</style>